import React from 'react'
import axios from 'axios'
import '../css/cartList.css'
import { connect } from 'react-redux'
import { addCart } from '../redux/action'
 
class CartList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            cartList: []
        }
    }

    render() {
        return (
            <div>
                <div className="gotoCart" onClick={()=> {
                    this.props.history.push('/cart')
                }}>购物车</div>
                <div className="dateil_items">
                    {
                        this.state.cartList.map((item, index)=> {
                            return <div key={index} className="item_container">
                                <div className="item_pic">
                                    <img src={item.productImage} width="100%" />
                                </div>
                                <div className="item_content">
                                    <div className="item_title">{item.productName}</div>
                                    <div className="item_price">￥{item.salePrice}</div>
                                    <div className="item_btn" onClick={()=> {
                                        this.props.add(addCart(item))
                                    }}>加入购物车</div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
        )
    }

    componentDidMount() {
        axios.get('http://localhost:3000/data2.json').then(res=> {
            // console.log(res.data.result.list)
            this.setState({
                cartList: res.data.result.list
            })
        })
    }
}

function mapStateToProps(rootReducer) {
    return {
        
    }
}

function mapActionToProps(dispatch) {
    return {
        add: (action)=> {dispatch(action)}
    }
}

export default connect(mapStateToProps, mapActionToProps)(CartList);